<template>
  <div class="transit-records">
    <div class="records-header">
      <h2>乘车记录</h2>
      <div class="header-actions">
        <el-button type="primary" @click="$router.push('/transit/scan')">
          扫码乘车
        </el-button>
      </div>
    </div>

    <div class="records-content">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部记录" name="all">
          <transit-record-list :records="records" :loading="loading" />
        </el-tab-pane>
        <el-tab-pane label="待支付" name="pending">
          <transit-record-list :records="pendingRecords" :loading="loading" />
        </el-tab-pane>
      </el-tabs>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 支付对话框 -->
    <payment-dialog
      v-model="paymentDialogVisible"
      :record="selectedRecord"
      @payment-success="handlePaymentSuccess"
    />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import TransitRecordList from '@/components/transit/TransitRecordList.vue'
import PaymentDialog from '@/components/payment/PaymentDialog.vue'
import { getTransitRecords, getPendingPayments } from '@/api/transit'

export default {
  name: 'TransitRecords',
  components: {
    TransitRecordList,
    PaymentDialog
  },
  setup() {
    const activeTab = ref('all')
    const records = ref([])
    const pendingRecords = ref([])
    const loading = ref(false)
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const paymentDialogVisible = ref(false)
    const selectedRecord = ref(null)

    // 加载记录
    const loadRecords = async () => {
      loading.value = true
      try {
        const response = await getTransitRecords({
          page: currentPage.value - 1,
          size: pageSize.value
        })
        records.value = response.content
        total.value = response.totalElements
      } catch (error) {
        ElMessage.error('获取乘车记录失败')
      } finally {
        loading.value = false
      }
    }

    // 加载待支付记录
    const loadPendingRecords = async () => {
      loading.value = true
      try {
        pendingRecords.value = await getPendingPayments()
      } catch (error) {
        ElMessage.error('获取待支付记录失败')
      } finally {
        loading.value = false
      }
    }

    // 处理标签页切换
    const handleTabClick = () => {
      if (activeTab.value === 'pending') {
        loadPendingRecords()
      } else {
        loadRecords()
      }
    }

    // 处理分页大小变化
    const handleSizeChange = (val) => {
      pageSize.value = val
      loadRecords()
    }

    // 处理页码变化
    const handleCurrentChange = (val) => {
      currentPage.value = val
      loadRecords()
    }

    // 处理支付成功
    const handlePaymentSuccess = () => {
      paymentDialogVisible.value = false
      loadPendingRecords()
      ElMessage.success('支付成功')
    }

    // 显示支付对话框
    const showPaymentDialog = (record) => {
      selectedRecord.value = record
      paymentDialogVisible.value = true
    }

    onMounted(() => {
      loadRecords()
    })

    return {
      activeTab,
      records,
      pendingRecords,
      loading,
      currentPage,
      pageSize,
      total,
      paymentDialogVisible,
      selectedRecord,
      handleTabClick,
      handleSizeChange,
      handleCurrentChange,
      handlePaymentSuccess,
      showPaymentDialog
    }
  }
}
</script>

<style scoped>
.transit-records {
  padding: 20px;
}

.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.records-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style> 